<template>
    <div class="video_canvas">
        <div id="container" style="margin: 0 auto; text-align: center;">
            <video style="border: 1px solid #333; max-width: 500px;" controls autoplay  id="player"></video>
        </div>
        <div class="serve_content">
            <p v-for="(v,i) in serveContent" :key="i">
                {{ v }}
            </p>
      </div>
    </div>
</template>
<script>
export default{
    name:'jmuxer',
    data(){
        return{
            wsUrl:"",
            jmuxer:{},
            serveContent:[],
        }
    },
    mounted(){
        this.wsUrl = window.config.wsUrl;
        this.jmuxer = new JMuxer({
            node: 'player',
            mode: 'video',
            flushingTime: 0,
            fps: 30,
            debug: true,
            onError: function(data) {
                if (/Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor)) {
                    this.jmuxer.reset();
                }
            }
        });
        this.connectWebSocket();
    },
    destroyed() {
        console.log("关闭")
        this.webSocket.close();
    },
    methods:{
        connectWebSocket() {
            this.webSocket = new WebSocket(this.wsUrl);
            this.webSocket.binaryType = 'arraybuffer';
            
            this.webSocket.onopen = () => {
            console.log('WebSocket connected');
            };
    
            this.webSocket.onmessage = (event) => {
                console.log(event)
                this.serveContent.push(event.data);
                this.jmuxer.feed({
                    video: new Uint8Array(event.data),
                })
            if (event.data instanceof ArrayBuffer) {
                
            }
            else{
                console.log('gettt')
            }
            };
    
            this.webSocket.onerror = (error) => {
            console.error('WebSocket error:', error);
            };
    
            this.webSocket.onclose = () => {
            console.log('WebSocket disconnected');
            };
        },
        
    }
}
</script>
<style>
#container video{
    width: 100%;
    height: 300px;
}
.serve_content{
    width: 100%;
    height: 200px;
    overflow-y: auto;
}
.serve_content p{
    line-height: 20px;
    font-size: 20px;
}
</style>